@import "style-variable.scss";
$height:65px;

@mixin layui-li {
    li {
        a {
            height: $height;
            line-height: $height;
            color: #555555 !important;

            // 重写layui样式
            .layui-nav-more {
                content: '';
                width: 0;
                height: 0;
                border-style: solid dashed dashed;
                border-color: #555555 transparent transparent;
                overflow: hidden;
                cursor: pointer;
                transition: all .2s;
                -webkit-transition: all .2s;
                position: absolute;
                top: 50%;
                right: 3px;
                margin-top: -4px;
                border-width: 6px;
                border-top-color: rgba(0, 0, 0, .7);
            }

            .layui-nav-mored,
            .layui-nav-mored>a {
                margin-top: -9px;
                border-style: dashed dashed solid;
                border-color: transparent transparent rgba(0, 0, 0, .7);
            }
        }

        dl>dd>a {
            height: $height/1.5;
            line-height: $height/1.5;
        }
    }
}

.header {
    background-color: $bgwhite;
    height: $height;
    display: flex;
    justify-content: space-between;

    &-left {
        width: 185px;

        &-logo {
            display: block;
            width: 185px;
            height: $height;
        }
    }

    &-center {
        width: 850px;
        height: $height;
        align-items: center;
        justify-content: space-between;

        &-menu {
            height: $height;
            width: 700px;

            &-ul {
                padding: 0 !important;

                @include layui-li;

            }
        }

        &-search {
            position: relative;

            button {
                border-color: #D2D2D2;
                font-size: 14px;
                width: 65px;
                border-radius: 20px;

                &:hover {
                    border-color: #D2D2D2;
                    color: $hovercolor;
                }
            }

            &-type {
                $height: 38px;
                position: relative;
                @include layui-li;
                width: 70px;
                border: 1px solid #D2D2D2;
                padding: -2px 0;
                border-right: none;

                li {
                    width: 70px;
                    height: 36px;
                    position: relative;

                    a {

                        height: 36px;
                        line-height: 36px;
                    }

                    dl {
                        top: 37px;

                        dd>a {
                            height: $height/1.5;
                            line-height: $height/1.5;
                            padding: 0 20px;
                        }
                    }
                }
            }

            input {
                border-right: none;
                border-radius: 0;
                border-color: #D2D2D2;
                border-left: 0px;
                font-size: 12px
            }

            button {
                border-left: none;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

    }

    &-right {
        height: $height;
        width: 200px;

        &-btn {
            justify-content: flex-end;
            align-items: center;
            height: $height;
            line-height: $height;
        }

    }
}